<template>
	<view>
		<view class="palyer">
			<u--form labelPosition="left" :model="model1" :rules="rules" ref="form1" labelWidth='80' errorType="toast" :labelStyle='formLabelStyle'>
				<u-form-item label="名称" prop="userInfo.competitionName" borderBottom ref="item1" >
					<u--input v-model="model1.userInfo.competitionName" border="none" placeholder="请输入赛事名称"></u--input>
				</u-form-item>


				<!-- <u-form-item label="申请人" prop="userInfo.name" borderBottom ref="item1">
					<u--input v-model="userInfo.name" placeholder="请输入申请人" border="none"></u--input>
				</u-form-item> -->
				<u-form-item label="主办方" prop="userInfo.organizer" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.organizer" placeholder="请输入主办方" border="none"></u--input>
				</u-form-item>
				<u-form-item label="赛事类型" prop="userInfo.competitionType" borderBottom ref="item1">
					<picker :range='typeList' range-key="typeName"  @change='tapType'>
						<u--input v-model="competitionTypeId" disabledColor="$bg-color" disabled placeholder="请输入赛事类型" border="none"></u--input>
					</picker>
				</u-form-item>
				<!-- <u-form-item label="联系方式" prop="userInfo.phone" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.phone" placeholder="请输入联系方式" border="none"></u--input>
				</u-form-item> -->
				<u-form-item label="区域" prop="userInfo.areaAddress" borderBottom ref="item1" @click='ismask = true'>
					<u--input v-model="model1.userInfo.areaAddress" disabled disabledColor="$bg-color" placeholder="请输入省市区街道" border="none"></u--input>
				</u-form-item>
				<u-form-item label="详细地址" prop="userInfo.detailAddress" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.detailAddress"  placeholder="请输入详细地址" border="none"></u--input>
				</u-form-item>
				<u-form-item label="开始时间" @click='timeShow = true,timeType = 1' prop="userInfo.start" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.startTime"  disabled disabledColor="$bg-color"
						placeholder="请输入活动时间" border="none"></u--input>
				</u-form-item>
				<u-form-item label="结束时间" @click='timeShow = true,timeType =2' prop="userInfo.start" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.endTime" disabled disabledColor="$bg-color"
						placeholder="请输入活动时间" border="none"></u--input>
				</u-form-item>
				<u-form-item label="赛事介绍" prop="userInfo.competitionSubtitle" borderBottom ref="item1">
					<textarea style="width: 100%;" v-model="model1.userInfo.competitionSubtitle" placeholder="介绍下赛事" border="none"></textarea>
				</u-form-item>
				<!-- <u-form-item label="投票方式" prop="userInfo.voteType" borderBottom ref="item1">
					<u-radio-group v-model="model1.userInfo.voteType" placement="row"  activeColor="red">
						<u-radio :customStyle="{marginRight:'10px'}" v-for="(item, index) in radiolist1" :key="index"
							:label="item.name" :name="item.id" @change="radioChange1(e,'voteType')">
						</u-radio>
					</u-radio-group>
				</u-form-item> -->
				<u-form-item label="参与方式" prop="userInfo.joinType" borderBottom ref="item1">
					<u-radio-group v-model="model1.userInfo.joinType" placement="row"  activeColor="red">
						<u-radio :customStyle="{marginRight:'10px'}" v-for="(item, index) in radiolist2" :key="index"
							:label="item.name" :name="item.id" @change="radioChange1(e,'joinType')" >
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="是否评分" prop="userInfo.scoreStatus" borderBottom ref="item1">
					<u-radio-group v-model="model1.userInfo.scoreStatus" placement="row"  activeColor="red">
						<u-radio :customStyle="{marginRight:'10px'}" v-for="(item, index) in radiolist3" :key="index"
							:label="item.name" :name="item.id" @change="radioChange1(e,'scoreStatus')">
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="是否付费" prop="userInfo.payStatus" borderBottom ref="item1">
					<u-radio-group v-model="model1.userInfo.payStatus" placement="row"  activeColor="red">
						<u-radio :customStyle="{marginRight:'10px'}" v-for="(item, index) in radiolist4" :key="index"
							:label="item.name" :name="item.id" @change="radioChange1(e,'payStatus')" >
						</u-radio>
					</u-radio-group>
					
				</u-form-item>
				<u-form-item v-if="model1.userInfo.payStatus == 1" label="付费金额" prop="userInfo.payPrice" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.payPrice"
						placeholder="请输入付费金额" border="none" type='number'></u--input>
				</u-form-item>
				<u-form-item label="赛事图片" prop="userInfo.competitionImgUrl" borderBottom ref="item1"
					style='justify-content: space-between;'>

					<view style="flex:3"> </view>
					<uploadImage :fileList="fileList1" maxCount="10" @deletePic='deletePic' @afterRead='afterRead' />


				</u-form-item>
				<button class='submites' @click="btnSubmit">确定</button>
			</u--form>
			<u-datetime-picker :show="timeShow" v-model="time1" mode="date" @confirm='confirmTime' @cancel='timeShow = false'></u-datetime-picker>
            <!-- 选择所在区域组件 -->
            <choose-address :ismask="ismask" @transRegionInfo="transRegionInfo" @closePupop="closePupop"></choose-address>
		</view>
	</view>
</template>

<script>
	import {
		getToken,
		getCompetititonListAPi,getCompetititonTypeApi,getCompetititonApplyApi
	} from '@/config/api.js'
	import chooseAddress  from '@/components/choose-address/choose-address.vue'
	export default {
		components: {
			chooseAddress,
		
		},
		data() {
			return {
				ismask: false,
				model1:{
				userInfo: {
					competitionName: '',
					// phone: '',
					areaAddress:'',
					detailAddress:'',
					competitionType:'',
					competitionSubtitle: '',
					startTime:'',
					endTime:'',
					voteType: '',
					scoreStatus: '',
					joinType: '',
					payStatus: '',
					payPrice:0.00,
					provinceId:'',
					cityId:'',
					districtId:'',
					townId:'',
				}},
				competitionTypeId:'',
				time1: Number(new Date()),
				timeType:'',
				rules: {
					'userInfo.competitionName': {
						type: 'string',
						required: true,
						message: '请填写机构名称',
						trigger: ['blur', 'change']
					},
				
					'userInfo.organizer': {
						type: 'string',
						required: true,
						message: '请输入主办方',
						trigger: [ 'change']
					},
			
					'userInfo.areaAddress': {
						type: 'string',
						required: true,
						message: '请输入省市区街道',
						trigger: ['blur', 'change']
					},
					'userInfo.detailAddress': {
						type: 'string',
						required: true,
						message: '请输入详细地址',
						trigger: ['blur', 'change']
					},
					'userInfo.startTime': {
						type: 'string',
						required: true,
						message: '请输入开始时间',
						trigger: ['blur', 'change']
					},
					'userInfo.endTime': {
						type: 'string',
						required: true,
						message: '请输入结束时间',
						trigger: ['blur', 'change']
					},
					'userInfo.competitionSubtitle': {
						type: 'string',
						required: true,
						message: '请输入赛事介绍',
						trigger: ['blur', 'change']
					},
					'userInfo.joinType': {
						type: 'number',
						required: true,
						message: '请选择参与方式',
						trigger: ['blur', 'change']
					},
					'userInfo.scoreStatus': {
						type: 'number',
						required: true,
						message: '请选择是否评分',
						trigger: ['blur', 'change']
					},
					// 'userInfo.voteType': {
					// 	type: 'number',
					// 	required: true,
					// 	message: '请选择投票方式',
					// 	trigger: ['blur', 'change']
					// },
					'userInfo.payStatus': {
						type: 'number',
						required: true,
						message: '请选择是否付费报名',
						trigger: ['blur', 'change']
					},
				},
				fileList1: [],
				competitionImgUrl: [],//赛事图片
				timeShow: false,
				time1: Number(new Date()),
				radiolist1: [{
						name: '免费',
						id: 0,
						disabled: false
					},
					{
						name: '付费',
						id: 1,
						disabled: false
					}
				],
				radiolist2: [{
						name: '非机构',
						id: 0,
						disabled: false
					},
					{
						name: '机构',
						id: 1,
						disabled: false
					}
				],
				radiolist3: [{
						name: '否',
						id: 0,
						disabled: false
					},
					{
						name: '是',
						id: 1,
						disabled: false
					}
				],
				radiolist4: [{
						name: '免费',
						id: 0,
						disabled: false
					},
					{
						name: '付费',
						id: 1,
						disabled: false
					}
				],
				radiovalue1: 0,
				radiovalue2: 0,
				radiovalue3:0,
				radiovalue4: 0,
                typeList:[],
				formLabelStyle:this.$store.state.formLabelStyle
			}
		},
		created() {
			this.$checkLogin(1).then(res=>{
				this.getType()
			})
			// getCompetititonListAPi().then(res=>{
			// 	console.log(res)
			// })
		},
		
		methods: {
			getType(){
				getCompetititonTypeApi().then(res=>{
					this.typeList= res
				})
			},
			tapType(e){
			 console.log(e)	
			 let index = e.detail.value
			 this.model1.userInfo.competitionType= this.typeList[index].id
			 this.competitionTypeId= this.typeList[index].typeName
			},
			afterRead(e) {
				let obj = {}
				obj.url = e[1].url
				this.fileList1.push(obj)
				this.competitionImgUrl.push(e[1].url)
				
			},
			deletePic(e){
				console.log(e)
				this.fileList1.splice(e.index,1)
				this.competitionImgUrl.splice(e.index,1)
			},
			//选择时间
			confirmTime(e){
				if(this.timeType == 1){
					this.model1.userInfo.startTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
				}else{
					this.model1.userInfo.endTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
				}
				this.timeShow = false
			},
			// 关闭弹出框
			closePupop(val) {
				this.ismask = val;
			},
			transRegionInfo(val) {
				this.reginInfo = val;
				this.ismask = this.reginInfo.ismask;
				this.model1.userInfo.areaAddress = this.reginInfo.result;
				this.model1.userInfo.provinceId = val.provinceId;
				this.model1.userInfo.cityId = val.cityId;
				this.model1.userInfo.districtId = val.districtId;
				this.model1.userInfo.townId = val.townId;
			},
			btnSubmit() {
                 this.$refs.form1.validate().then(res => {
					 var ta = this.model1.userInfo
					  let data={
						  ...ta,
						  competitionImgUrl:this.competitionImgUrl.toString(),
						
					  }
					  if(this.competitionTypeId == ''){
						  uni.$u.toast('请选择赛事类型')
						  return
					  }
					  if(this.model1.userInfo.payStatus == 1 && !uni.$u.test.amount(this.model1.userInfo.payPrice)){
						  uni.$u.toast('请输入正确金额')
						  return
					  }
					  console.log(data)
					  getCompetititonApplyApi(data).then(res=>{
						  uni.$u.toast('提交成功')
						  setTimeout(()=>{
							  uni.navigateBack({
							  	delta:1
							  })
						  },1000)
					  })
						
					}).catch(errors => {
						// uni.$u.toast('校验失败')
				 })
			},
			groupChange1(e,n) {
				this.model1.userInfo[n] =e
			},
			radioChange1(e,n) {
				this.model1.userInfo[n] =e
			}
		}
	}
</script>

<style lang="scss">

</style>
